<template>
  <div>
    <el-row style="margin-left:-13px;">
      <el-tooltip effect="light" placement="left">
        <div slot="content">
          <div
            v-html="data['customerRemark']"
            style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
          ></div>
          <!-- <el-table
            :data="customerReamrkData"
            style="width:600px;overflow:auto;"
          >
            <el-table-column prop="remark" label="客户备注" width="360">
            </el-table-column>
          </el-table> -->
        </div>
        <i
          v-if="null == data['customerRemark'] || data['customerRemark'] == ''"
          style="font-size:20px"
          @mouseover="initcustomerReamrkData"
          class="el-icon-user-solid"
        ></i>
        <i
          v-else
          style="font-size:20px;color:red"
          @mouseover="initcustomerReamrkData"
          class="el-icon-user-solid"
        ></i>
      </el-tooltip>
      <el-popover effect="light" placement="left" width="800" trigger="hover">
        <!-- 物流轨迹 -->

        <el-table :data="trackData">
          <el-table-column prop="time" label="时间" show-overflow-tooltip="">
          </el-table-column>
          <el-table-column prop="address" label="地点" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="operationName"
            label="操作人"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="track" label="轨迹" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-button type="text" @click="queryDetailShippingTraceByWaybillId"
          >查看更多>></el-button
        >

        <i
          slot="reference"
          style="font-size:20px"
          class="el-icon-truck"
          @mouseover="queryShippingTraceByWaybillId"
        ></i>
      </el-popover>
      <el-tooltip effect="light" placement="left">
        <div slot="content">
          <div
            v-html="data['sysRemark']"
            style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
          ></div>
        </div>
        <i
          style="font-size:20px"
          @mouseover="initSysRemark"
          class="el-icon-s-flag"
        ></i>
      </el-tooltip>
      <el-tooltip effect="light" content="" placement="top">
        <img v-if="delivery" :src="delivery" />
      </el-tooltip>
      <el-tooltip effect="light" content="" placement="top">
        <img v-if="tdGreen" :src="tdGreen" />
      </el-tooltip>
      <el-tooltip effect="light" content="起运港账单" placement="top">
        <img v-if="yesbillstatus" :src="yesbillstatus" />
      </el-tooltip>
    </el-row>
    <el-row style="margin-left:-8px;">
      <el-tooltip effect="light" content="目的港账单" placement="top">
        <img v-if="portdestination0" :src="portdestination0" />
      </el-tooltip>
      <el-tooltip effect="light" content="贸易报关" placement="top">
        <img v-if="payforcustomsdeclaration" :src="payforcustomsdeclaration" />
      </el-tooltip>
      <el-tooltip effect="light" content="" placement="top">
        <img
          v-if="payforcustomsdeclarationgreen"
          :src="payforcustomsdeclarationgreen"
        />
      </el-tooltip>
      <!-- <el-tooltip effect="light" content="" placement="top"> -->
      <img :src="vatImg" />
      <!-- </el-tooltip> -->
      <!-- <el-tooltip effect="light" content="" placement="top"> -->
      <img :src="fang" />
      <!-- </el-tooltip> -->
      <!-- <el-tooltip effect="light" content="" placement="top"> -->
      <!-- <img v-if="onlineinqury1" :src="onlineinqury1" /> -->
      <!-- </el-tooltip> -->
      <el-tooltip effect="light" placement="top">
        <div slot="content">
          <el-row v-for="item in mergerDeclarationNos" :key="item">
            <el-col>
              <span>{{ item }}</span>
            </el-col>
          </el-row>
        </div>
        <img
          v-if="
            data.mergerDeclarationNo && data.mergerDeclarationNo !== '__$null__'
          "
          :src="mergerdeclaration"
          @mouseover="asyncLoadingOtherWaybillNo(data.mergerDeclarationNo)"
        />
      </el-tooltip>
      <!-- <el-tooltip effect="light" content="" placement="top">  -->
      <img
        v-if="data.isNeedExamine"
        :src="
          data.isAlreadyExamine && data.isAlreadyExamine == 1
            ? nosignExamine
            : yessignExamine
        "
      />
      <!-- </el-tooltip> -->
      <!-- <el-tooltip effect="light" content="" placement="top">  -->
      <img
        :src="data.onlineInquiryReplyId ? onlineinqury1 : onlineinqury0"
        @click="toOnlineInquiry(data.onlineInquiryReplyId)"
      />
      <!-- </el-tooltip> -->
      <img v-if="data.isPVA" :src="ispva1" />
    </el-row>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

import deliveryPng from "@/assets/images/delivery.png";
import undeliveryPng from "@/assets/images/undelivery.png";
import tdGreenPng from "@/assets/images/tdGreen.png";
import tegreyPng from "@/assets/images/tegrey.png";
import yesbillstatusPng from "@/assets/images/yesbillstatus.png";
import nobillstatusPng from "@/assets/images/nobillstatus.png";
import portdestination0Png from "@/assets/images/portdestination0.png";
import portdestination1Png from "@/assets/images/portdestination1.png";
import payforcustomsdeclarationPng from "@/assets/images/payfor_customs_declaration.png";
import payforcustomsdeclarationbluePng from "@/assets/images/payforcustomsdeclarationblue.png";
import payforcustomsdeclarationgreenPng from "@/assets/images/payforcustomsdeclarationgreen.png";
import twomixdeclarationPng from "@/assets/images/two_mix_declaration.png";
import generalgreendeclarationPng from "@/assets/images/general_green_declaration.png";
import generalbusinessdeclarationPng from "@/assets/images/general_business_declaration.png";

import waybillyesvatPng from "@/assets/images/waybillyesvat.png";
import waybillnovatPng from "@/assets/images/waybillnovat.png";
import waybillredvatPng from "@/assets/images/waybillredvat.png";
import fang1Png from "@/assets/images/fang1.png";
import fang2Png from "@/assets/images/fang2.png";
import mergerdeclarationPng from "@/assets/images/mergerdeclaration.jpeg";
import nosignExaminePng from "@/assets/images/nosignExamine.png";
import yessignExaminePng from "@/assets/images/yessignExamine.png";
import onlineinqury1Png from "@/assets/images/onlineinqury1.png";
import onlineinqury0Png from "@/assets/images/onlineinqury0.png";
import ispva1Png from "@/assets/images/ispva1.png";
import ispva0Png from "@/assets/images/ispva0.png";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      trackData: [],
      sysReamrkData: [],
      customerReamrkData: [],
      //  提
      delivery: "",
      //  送
      undelivery: undeliveryPng,
      // TD
      tdGreen: tdGreenPng,
      tegrey: tegreyPng,
      //  起 - yes
      yesbillstatus: yesbillstatusPng,
      //  起 - no
      nobillstatus: nobillstatusPng,
      //  目
      portdestination0: portdestination0Png,
      //  目
      portdestination1: portdestination1Png,
      // 报
      payforcustomsdeclaration: payforcustomsdeclarationPng,
      // // 报
      payforcustomsdeclarationblue: payforcustomsdeclarationbluePng,
      // // 报
      payforcustomsdeclarationgreen: "",
      // 报
      generalgreendeclaration: generalgreendeclarationPng,
      // 报
      generalbusinessdeclaration: generalbusinessdeclarationPng,
      // VAT
      // waybillyesvat: waybillyesvatPng,
      // // VAT
      // waybillnovat: waybillnovatPng,
      // // VAT
      // waybillredvat: waybillredvatPng,
      // 放
      fang: fang1Png,
      // 放

      // 合
      mergerdeclaration: mergerdeclarationPng,
      // 查
      nosignExamine: nosignExaminePng,
      // 查
      yessignExamine: yessignExaminePng,
      // 询
      onlineinqury1: onlineinqury1Png,
      // 询
      onlineinqury0: onlineinqury0Png,
      // PVA
      ispva1: ispva1Png,
      // PVA
      ispva0: ispva0Png,
      systemReamrk: "",
      customerRemark: "",
      customerSpecial:"",
      mergerDeclarationNos: [],
      vatImg: waybillnovatPng
    };
  },

  methods: {
    toOnlineInquiry(id) {
      console.log("id :>> ", id);
      if (!id) return;
      // 跳转询价页面
      window.open(
        "/#/blank/waybill__viewOnlineInquiryAndReplys__main?replyId=" + id
      );
    },
    queryDetailShippingTraceByWaybillId() {
      var url = "#/blank/waybill__waybillTrackInfo__main";
      url = url + "?waybillId=" + this.data["id"] + "&type=" + 0;
      window.open(url, "_blank");
    },
    asyncLoadingOtherWaybillNo(mergerDeclarationNo) {
      var params = {};
      params["id"] = this.data["id"];
      params["code"] = mergerDeclarationNo;
      ajax("asyncLoadingOtherWaybillNo", params).then(
        res => {
          if (res.code == 200) {
            this.mergerDeclarationNos = res.data;
            //跳转到新页面
          } else {
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    queryShippingTraceByWaybillId() {
      var params = {};
      params["id"] = this.data["id"];
      ajax("queryShippingTraceByWaybillId", params).then(
        res => {
          if (res.code == 200) {
            this.trackData = res.data;
            //跳转到新页面
          } else {
            this.trackData.push("暂时没有物流信息，请耐心等待");
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    initSysRemark() {
      this.sysReamrkData = [];
      var systemReamrks = this.data["sysRemark"];
      if (systemReamrks) {
        var remarks = systemReamrks.split("<br/>");
        remarks.forEach(element => {
          var sysRemark = {};
          sysRemark["remark"] = element;
          this.sysReamrkData.push(sysRemark);
        });
      }
    },
    initcustomerReamrkData() {
      this.customerReamrkData = [];
      var systemReamrks = this.data["customerRemark"];
      if (systemReamrks) {
        var remarks = systemReamrks.split("<br/>");
        remarks.forEach(element => {
          var sysRemark = {};
          sysRemark["remark"] = element;
          this.customerReamrkData.push(sysRemark);
        });
      }
    },
    initShow(
      selfDelivered,
      isShowTDpic,
      billStatus,
      portOfDestinationBillStatus,
      isCustomerDeclaration,
      payforcustomsdeclaration,
      payforcustomsdeclarationgreen
    ) {
      if (null != selfDelivered && selfDelivered == 1) {
        this.delivery = deliveryPng;
      } else if (null != selfDelivered && selfDelivered == 0) {
        this.delivery = undeliveryPng;
      }

      if (null != isShowTDpic && isShowTDpic == 1) {
        this.tdGreen = tdGreenPng;
      } else {
        this.tdGreen = tegreyPng;
      }

      if (null != billStatus && billStatus == 1) {
        this.yesbillstatus = yesbillstatusPng;
      } else {
        this.yesbillstatus = nobillstatusPng;
      }

      if (
        null != portOfDestinationBillStatus &&
        portOfDestinationBillStatus == 1
      ) {
        this.portdestination0 = portdestination1Png;
      } else {
        this.portdestination0 = portdestination0Png;
      }
      // 42 43 兼容老数据
      if (isCustomerDeclaration == 0 || isCustomerDeclaration == 42) {
        this.payforcustomsdeclaration = payforcustomsdeclarationPng;
      } else if (isCustomerDeclaration == 1 || isCustomerDeclaration == 43) {
        if (payforcustomsdeclaration) {
          this.payforcustomsdeclaration = generalgreendeclarationPng;
        } else {
          this.payforcustomsdeclaration = generalbusinessdeclarationPng;
        }
        if (payforcustomsdeclarationgreen) {
          this.payforcustomsdeclarationgreen = payforcustomsdeclarationgreenPng;
        }
      } else {
        this.payforcustomsdeclaration = twomixdeclarationPng;
      }
    },
    /*async checkUploadCustomsDeclaration() {
      const data = await ajax("checkUploadCustomsDeclaration", {
        id: this.data["id"]
      });
      if (payforcustomsdeclaration) {
        this.payforcustomsdeclaration = generalgreendeclarationPng;
      } else {
        this.payforcustomsdeclaration = generalbusinessdeclarationPng;
      }
      if (payforcustomsdeclarationgreen) {
        this.payforcustomsdeclarationgreen = payforcustomsdeclarationgreenPng;
      }
    }*/
  },
  mounted() {
    this.customerSpecial=this.data["customerSpecial"];
    this.customerRemark = this.data["customerRemark"];
    const selfDelivered = this.data["selfDelivered"];
    const isShowTDpic = this.data["isShowTDpic"];
    const billStatus = this.data["billStatus"];
    // console.log("this.data :>> ", this.data);
    const portOfDestinationBillStatus = this.data[
      "portOfDestinationBillStatus"
    ];
    const isCustomerDeclaration = this.data["isCustomerDeclaration"];
    const payforcustomsdeclaration = this.data["payforcustomsdeclaration"];
    const payforcustomsdeclarationgreen = this.data["payforcustomsdeclarationgreen"];
    this.initShow(
      selfDelivered,
      isShowTDpic,
      billStatus,
      portOfDestinationBillStatus,
      isCustomerDeclaration,
      payforcustomsdeclaration,
      payforcustomsdeclarationgreen
    );

    if (1 == this.data.isVatAndEori && this.data.eoriIsCertified == 1) {
      this.vatImg = waybillyesvatPng;
    } else if (
      (this.data.isVatAndEori == 1 && this.data.eoriIsCertified == 0) ||
      (this.data.isVatAndEori == 1 && this.data.eoriIsCertified == null)
    ) {
      this.vatImg = waybillredvatPng;
    } else {
      this.vatImg = waybillnovatPng;
    }

    this.fang = this.data.isConfirmPrediction ? fang2Png : fang1Png;
  }
};
</script>

<style></style>
